<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<th:block th:include="include :: wxheader('提货记录')" />
		<!--<title>提货记录</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/mui.min.css" />-->
		<link rel="stylesheet" type="text/css" th:href="@{/css/record.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/css/wuliu.css}">
		<th:block th:include="include :: remControl-js" />
		<!--<script type="text/javascript" src="js/remControl.js"></script>-->
	</head>

	<style>
		.leftbox {
			display: flex;
			justify-content: center;
			padding: 4% 0%;
			background-color: #fff;
			position: fixed;
			z-index: 999;
			margin: auto;
			left: 0;
			right: 0
		}
		
		.text-ti {
			height: 30px;
			border: 2px solid #07a989;
			color: #000;
			font-size: 15px;
			line-height: 30px;
			padding: 0 12px;
		}
		
		.mmactive {
			background-color: #07a989;
			color: #fff;
		}
		/*.alltxt{padding-top: 18%;}*/
		.fc-infotxt{margin: 10px;}
		.fc-infotxt p{border: 1px solid gainsboro;}
	</style>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">已发货记录</h1>
			<a th:href="@{/wx/index}" class="mui-icon mui-icon-home mui-pull-right"></a>
		</header>

		<div class="mui-content">
				<!--<div class="leftbox">-->
					<!--<div class="text-ti mmactive">已发货</div>-->
					<!--<div class="text-ti">未发货</div>-->
				<!--</div>-->

				<div class="alltxt">
					<div class="alltxt_text">
						<div id="footer"
							 th:if="${list!=null&&order.state==1}"
							 th:each="order : ${list}">
							<p class="h34">劵卡编码：<span class="gray" th:text="${order.logisticsCode}">999999999999</span></p>
							<div class="all">
								<div class="tu01"><img th:src="${order.imgUrl}"></div>
								<div class="text">
									<p class="b16" th:text="${order.productName}">精美大礼包【演示】</p>
									<p class="gray" th:utext="${order.proSpec}">商品内容：盱眙龙虾6对；阳澄湖大闸蟹4对；深海海参4尾。dfgserthsrtjnytsjhtyjghjhjnhgnbvnbgvnghnghnhhgnhghnhgnhgnhg</p>
								</div>
							</div>
							<div class="logo"><img th:src="@{/img/tihuo.png}" src="img/tihuo.png"></div>
							<div>
								<p class="xia"><img th:src="@{/img/xia.png}"  src="img/xia.png" class="tu"></p>
								<div class="fc-infotxt" style="display: none;">
									<p><span>收&ensp;货&ensp;人：</span><span th:text="${order.consignee}">xxxx</span></p>
									<p><span>联系电话：</span><span th:text="${order.tel}">157594522</span></p>
									<p><span>收货地址：</span><span th:text="${order.orderAddress}">xxxx</span></p>
									<p><span>备&emsp;&emsp;注：</span><span th:text="${order.descn}">xxxx</span></p>
									<p><span>快递单号：</span><span th:text="${order.expressNumber}">12345678899</span></p>
									<p><span>订单状态：</span><span style="color: green">已发货</span></p>
									<div id="box">
										<button th:data-code="${order.expressNumber}" class="btn"
												onclick="selectLogistics(this.getAttribute('data-code'),this)">查看物流</button>
										<!--<button class="btn" >查看物流</button> -->
									</div>
									<div class="package-status" style="display: none">
										<div class="status-box">
											<ul class="status-list">
												<!--<li>-->
													<!--<div class="status-content-before">您的订单开始处理</div>-->
													<!--<div class="status-time-before">2017-08-17 23:31 周四</div>-->
													<!--<div class="status-line"></div>>-->
												<!--</li>-->
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

			</div>
		</div>
		<th:block th:include="include :: wxfooter" />
		<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>-->
		<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
		<script type="text/javascript">
			$(function() {
				$(".xia").bind('tap', function(e) {
					$(this).next("div").slideToggle("500").siblings('div:visible').slideUp(500)
				})

			})

			function selectLogistics(expressNumber,obj){
				$(".package-status").show()
				layer.load(0, {shade: false})
				$.ajax({
					type: "post",
					url: ctx + "wx/json/logisticsMsg",
					data: {
						'expressNumber':expressNumber
					},
					success: function (r) {
						layer.closeAll();
						if (r.code==0){
							if (r.data.Success) {
								$(obj).hide();
								let datas = r.data.Traces;
								if (datas != null){
									for (let i = 0, len = datas.length; i < len; i++) {
										let $li=$(`<li></li>`);
										// 第一个物流信息改变样式
										if (i+1==len){
											$li = $(`<li style="color: #0278d8"></li>`)
										}

										let $div =$(`<div class="status-content-before">${datas[i].AcceptStation}</div>
									<div class="status-time-before">${datas[i].AcceptTime}</div>
									<div class="status-line"></div>`);
										$li.append($div);
										$(obj).parent().next().find('ul').prepend($li);
									}
								}
							} else {
								layer.msg("该单号暂时还未有物流消息")
							}
						}else {
                           layer.msg(r.msg)
						}
					},
					error: function () {
						layer.closeAll();
						layer.msg("网咯错误，请重新刷新界面")
					}
				});
			}


			function updateOrder(id,code) {
			/*	wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						$("#wxImg").prop('src',localIds)
					}
				});*/
			/*	wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function (res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						result = result.split("=")[1];
						mui.alert(code + ',' + result);
						if(code == result){
							mui.alert("扫码结果：" + result);
							/!*$.ajax({
								type : "get",
								url : ctx + "/core/orders/update/" + id,
								data : {},
								dataType : "json",
								beforeSend: function(xhr){},
								success : function(data){
									if(data.code==0){
										mui.alert(data.msg,function(){
											window.location.reload();
										});
									}else{
										mui.alert(data.msg);
									}
								},
								error : function(xhr, textStatus, errorThrown){
									console.log(xhr.status);
									console.log(xhr.statusText);
									console.log(xhr.responseText);
								}
							});*!/
						}else{
							mui.alert("券码不符,扫码结果：" + result);
						}
					}
				});*/
			}

			/*$(function(){
				var appid,timestamp,nonceStr,signature;
				$.ajax({
					type : "get",
					url : ctx + "/wx/json/scan",
					data : {
						"url": window.location.href
					},
					async : false,
					dataType : "json",
					success : function(data){
						if(data.code==0) {
							appid = data.data.appId;
							timestamp = data.data.timestamp;
							nonceStr = data.data.nonceStr;
							signature = data.data.signature;
						}else{
							mui.alert(data.message);
						}
					},
					error : function(xhr, textStatus, errorThrown){
						console.log(xhr.status);
						console.log(xhr.statusText);
					}
				});

				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: appid, // 必填，公众号的唯一标识
					timestamp: timestamp, // 必填，生成签名的时间戳
					nonceStr: nonceStr, // 必填，生成签名的随机串
					signature: signature,// 必填，签名，见附录1
					jsApiList: ["scanQRCode","chooseImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

				});
				wx.ready(function(){
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					console.log("OK");
				});
				wx.error(function(res){
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					console.log(res);
				});
			})*/
		</script>
	</body>

</html>